<template>
  <a-form
    ref="formRef"
    inline
    :model="formData"
    :rules="rules"
    v-bind="formItemLayout"
  >
    <a-form-item label="任务名称" name="name" required>
      <a-input
        v-model:value="formData.name"
        placeholder="请输入任务名称"
        maxLength="50"
      />
    </a-form-item>
    <div class="overflow-scroll max-h-96">
      <div
        class="bg-[#f7f8fa] rounded px-3 py-3 flex justify-between"
        v-for="(item, index) in point"
        :key="index"
      >
        <div>
          <span class="text-[#86909C]">{{ item.deviceName }}</span>
          <div
            class="leading-8 mt-2"
            v-for="(x, idx) in item.pointDetailList"
            :key="idx"
          >
            <a-checkbox v-model:checked="x.checked">
              {{ x.pointName }}
            </a-checkbox>
          </div>
        </div>
        <div class="text-right">
          <span class="text-[#86909C]">漫游序号</span>
          <div v-for="(y, idx) in item.pointDetailList" :key="idx" class="mt-2">
            <a-input-number v-model:value="y.roamSeq" min="1" />
          </div>
        </div>
      </div>
    </div>
  </a-form>
</template>

<script lang="ts" setup>
import { watchEffect, ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
import type { Rule } from 'ant-design-vue/es/form'
import { getPointList } from './serve.api'

const formRef = ref()
const formData = reactive({
  name: '',
  pointDetailList: <any[]>[]
})

const formItemLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 24 }
}

const point = ref<any[]>([])

const props = defineProps({
  data: {
    type: Object,
    default: () => {}
  },
  selectList: {
    type: Array,
    default: () => []
  },
  modalType: {
    type: String,
    default: 'add'
  }
})

const rules: Record<string, Rule[]> = {}

function filterData() {
  let has = false
  let required = false
  const unique = new Set()
  const result = <any[]>[]

  point.value.forEach((x) => {
    x.pointDetailList.forEach((y: any) => {
      if (y.checked) {
        if (!y.roamSeq) {
          has = true
        } else if (unique.has(y.roamSeq)) {
          required = true
        } else {
          unique.add(y.roamSeq)
        }

        result.push({
          deviceId: x.deviceId,
          deviceName: x.deviceName,
          pointId: y.pointId,
          pointName: y.pointName,
          pointType: y.pointType,
          roamSeq: y.roamSeq
        })
      }
    })
  })

  if (has) return message.warning('漫游序号不能为空')
  if (required) return message.warning('漫游序号不能重复')

  formData.pointDetailList = result
}

watchEffect(() => {
  if (props.modalType === 'edit') {
    // console.log(props.data, 'edit')

    formData.id = props.data.id
    formData.name = props.data.name

    point.value.forEach((item) => {
      const filterData = props.data.pointDetailList.filter(
        (i: any) => i.deviceId === item.deviceId
      )
      item.pointDetailList = item.pointDetailList.map((y: any) => {
        const returnItem = filterData.find((x: any) => x.pointId === y.pointId)
        if (returnItem) {
          return {
            ...y,
            checked: true,
            roamSeq: returnItem.roamSeq
          }
        } else {
          return {
            ...y
          }
        }
      })
    })
  }
})

getPointList().then((res) => {
  console.log(res, 'getPointList')
  point.value = res
})

defineExpose({
  formData,
  formRef,
  filterData
})
</script>
